{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon iconfont icon-shezhi mui-pull-left" onclick="location.href='{:url("setting/index")}'"></a>
		<h1 class="mui-title">{$title?$title:'商城'}</h1>
		<a class="mui-icon iconfont icon-xiaoxi mui-pull-right" onclick="location.href='{:url("feedback/webmail")}'"></a>
		<span class="mui-badge  mui-badge-primary mui-hidden" id="webmailNumber" >0</span>
	</header>
{/block}

{block name="style"}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<style>
		#webmailNumber{
			position: absolute;
			right: 2px;
			top: 2px;
		    color: #fff;
    		background-color: #007aff;
    		z-index: 999;
		}

		.mui-content{
			border-top: 1px solid #ccc;
		}
		.user-info{
			background: #e60012;
			color:#fff;
			padding-top: 10px;
		}

		.user-info p{
			margin-bottom: 0;
			color:#fff;
		}

		.user-info .info{
			padding-left: 10px;
		}

		.order-status{
			background: #fff;
			margin-top: 5px;
		}

		.order-title{
			line-height: 30px;
			border-bottom: 1px solid #ccc;
			padding: 5px 10px;
			font-size: 14px;
		}
		
		.more-order{
			color: #8f8f94;
			font-size: 12px;
		}
		.status-item{
			width: 20%;
			float: left;
			text-align: center;
			padding: 10px 0;
			position: relative;
		}

		.status-item .iconfont{
			color: #8f8f94;
			font-size: 30px;
		}
		.status-item p{
			margin-bottom: 0;
			font-size:12px;
		}

		.status-item .mui-badge{
			position: absolute;
			top:3px;
			right: 3px;
		}

		.notice{
			height: 30px;
			margin-top: 5px;
			background: #fff;
			line-height: 30px;
			padding: 0 10px;
			font-size:14px;
			color:#333;
		}

		.swiper-container{
			height: 30px;
		}

		.menu{
			font-size:14px;
		}

		.menu .mui-navigate-right{
			color:#8f8f94;
		}

		.avatar{
			padding: 10px;
		}
		.avatar img{
			border-radius: 50%;
		}

		.mui-table-view-cell{
			padding: 13px 15px;
		}

		.notice-tips{
			color: #e60012;
			padding-right: 5px;
		}

		.swiper-wrapper a{
			color:#333;
		}

		.mui-table-view-cell.mui-collapse .mui-collapse-content.shop-content{
			margin: 0px -15px -11px;
			padding: 0;
		}

		.mui-table-view-cell.mui-collapse .mui-table-view{
			margin-top:0;
			margin-bottom: 0;
		}

		.mui-table-view-cell.mui-collapse .mui-table-view:after{
			height: 0
		}
	</style>
{/block}

{block name="main"}
	<div class="my" v-cloak>
		<div class="user-info mui-row">
			<div class="avatar mui-col-xs-3">
				<img :src="userInfo.head_ico?userInfo.head_ico:'/assets/mobile/images/default_avatar.png'" class="img-responsive" alt="">
			</div>
			<div class="info mui-col-xs-9">
				<p>
					<span v-if="userInfo.username">{{userInfo.username}}</span>
					<span v-else @tap="login()">点击登录</span>
				</p>
				<p>积分：{{userInfo.integral}}</p>
				<p>余额: {{userInfo.balance}}</p>
				<p>有效期</p>
			</div>
		</div>

		<div class="notice">
			<div class="notice-tips mui-pull-left">公告：</div>
		    <div class="swiper-container mui-pull-left">
		        <div class="swiper-wrapper">
		        	<div class="swiper-slide" v-for="notice in notices">
			        	<a :href="'/mobile/article/detail/id/'+notice.id" >
				            {{notice.title}}
			        	</a>
		        	</div>
		        </div>
		    </div>	
		</div>

		<div class="order-status">
			<div class="order-title">
				<b>我的订单</b>
				<a href="{:url('order/index')}" class="mui-pull-right more-order">全部订单 > </a>
			</div>
			<div class="mui-row">
				<div class="status-item">
					<a href="{:url('order/index',['status' =>1])}">
						<i class="mui-icon iconfont icon-daifukuan"></i>
						<p>待付款</p>
						<span class="mui-badge mui-badge-danger" v-if="orderCount.wait_pay > 0">{{orderCount.wait_pay}}</span>
					</a>
				</div>
				<div class="status-item">
					<a href="{:url('order/index',['status' =>2])}">
						<i class="mui-icon iconfont icon-daifahuo"></i>
						<p>待发货</p>
						<span class="mui-badge mui-badge-danger" v-if="orderCount.wait_delivery > 0">{{orderCount.wait_delivery}}</span>
					</a>
				</div>
				<div class="status-item">
					<a href="{:url('order/index',['status' =>3])}">
						<i class="mui-icon iconfont icon-icon3"></i>
						<p>待签收</p>
						<span class="mui-badge mui-badge-danger" v-if="orderCount.wait_sign > 0">{{orderCount.wait_sign}}</span>
					</a>
				</div>
				<div class="status-item">
					<a href="{:url('order/index',['status' =>4])}">
						<i class="mui-icon iconfont icon-daipingjia01"></i>
						<p>待评价</p>
						<span class="mui-badge mui-badge-danger" v-if="orderCount.comment > 0">{{orderCount.comment}}</span>
					</a>
				</div>
				<div class="status-item text-danger">
					<a href="{:url('aftersales/index')}">
						<i class="mui-icon iconfont icon-tuikuanshouhou"></i>
						<p>售后</p>
						<span class="mui-badge mui-badge-danger" v-if="orderCount.after > 0">{{orderCount.after}}</span>
					</a>
				</div>
			</div>
		</div>

		<div class="menu">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-hidden">
			        <a class="mui-navigate-right" href="{:url('user/sons')}">
			        	<span class="mui-icon iconfont icon-haoyou text-primary"></span>
			        	我的下级
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('funds/index')}">
			        	<span class="mui-icon iconfont icon-qianbao text-danger"></span>
			        	我的钱包
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('user/verified')}">
			        	<span class="mui-icon iconfont icon-weibiaoti2fuzhi12 text-primary"></span>
			        	实名认证
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('funds/transfer')}">
			        	<span class="mui-icon iconfont icon-zhuanzhang text-warning"></span>
			        	我要转帐
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" :href="'/mobile/user/qrcode?mobile='+userInfo.mobile">
			        	<span class="mui-icon iconfont icon-erweima text-success"></span>
			        	我的二维码
			        </a>
			    </li>

			    <li class="mui-table-view-cell" v-if="shop_status == 0">
			        <a class="mui-navigate-right" @tap.stop="showShopTips()">
			        	<span class="mui-icon iconfont icon-dianpu text-primary"></span>
			        	我要开店
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-collapse" v-else>
		            <a class="mui-navigate-right" href="#">
			        	<span class="mui-icon iconfont icon-dianpu text-primary"></span>
		            	我要开店
		            </a>
		            <div class="mui-collapse-content shop-content">
		                <ul class="mui-table-view">
		                	<li class="mui-table-view-cell">
						        <a class="mui-navigate-right" :href="'/mobile/usershop/setting'">
						        	<span class="mui-icon iconfont icon-shezhi text-danger"></span>
						        	小店设置
						        </a>
						    </li>
						    <li class="mui-table-view-cell">
						        <a class="mui-navigate-right" :href="'/mobile/usershop/selectGoods'">
						        	<span class="mui-icon mui-icon-bars text-success"></span>
						        	我的商品
						        </a>
						    </li>
						    <li class="mui-table-view-cell">
						        <a class="mui-navigate-right" :href="'/mobile//usershop/index'">
						        	<span class="mui-icon iconfont icon-dianpu text-warning"></span>
						        	我的小店
						        </a>
						    </li>
		                </ul>
		            </div>
		        </li>
			    
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('favorite/index')}">
			        	<span class="mui-icon iconfont icon-shoucang text-warning"></span>
			        	我的收藏
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('call/callList')}">
			        	<span class="mui-icon iconfont icon-icon text-primary"></span>
			        	话单查询
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('funds/withdrawRecord')}">
			        	<span class="mui-icon iconfont icon-tixian text-primary"></span>
			        	提现记录
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('order/addTbOrder')}">
			        	<span class="mui-icon iconfont icon-daifukuan text-danger"></span>
			        	淘宝订单
			        </a>
			    </li>
			    <li class="mui-table-view-cell" >
			        <a class="mui-navigate-right" href="{:url('funds/account')}">
			        	<span class="mui-icon iconfont icon-zhanghao text-danger"></span>
			        	收款帐号
			        </a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="{:url('feedback/index')}">
			        	<span class="mui-icon iconfont icon-yijianfankui text-success"></span>
			        	意见反馈
			        </a>
			    </li>
			</ul>	
		</div>
	</div>
{/block}

{block name="script"}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>

		var myVue = new Vue({
			el:'.my',
			data:{
				userInfo:[],
				orderCount:[],
				notices: [],
				webmail_number: 0,
				shop_status: 0,
				shop_tips: ''
			},
			mounted: function(){
				if(!token){
					location.href = '/mobile/user/login';
				}

				this.token = token;
				this.getUserInfo();
				this.getNotices();
			},
			methods: {
				//获取用户信息
				getUserInfo: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'user/index';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.userInfo = res.data.userInfo;
							that.orderCount = res.data.orderCount;
							that.webmail_number = res.data.web_mail_number;
							that.shop_status = res.data.shop_status;
							that.shop_tips = res.data.shop_tips
							if(res.data.web_mail_number > 0) {
								$('#webmailNumber').text(res.data.web_mail_number).removeClass('mui-hidden');
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//提示开店信息
				showShopTips: function(){
					mui.alert(this.shop_tips);
				},

				login:function(){
					location.href = '/mobile/user/login';
				},
				//获取公告信息
				getNotices: function(){
					var url =  'index/notice';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.notices = res.data;
						}	
					});
					that.noticeSwiper();
				},
				noticeSwiper:function(){
                    var bannerSwiper = new Swiper('.swiper-container', {
                        direction : 'vertical',
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
				        loop : true,
				        autoplay: true,
                    });
                },
			}
		});
	</script>
{/block}